<template>
  <div>
    <!-- 顶部滑动条 -->
    <div id="slider" class="mui-slider">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" data-scroll="1">
				<div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px); transition-duration: 0ms;">
					<a v-for='item in cates' :key='item.id' :class="['mui-control-item',item.id == 0?'mui-active':'']" @click='getImg(item.id)'>
						{{item.title}}
					</a>
				</div>
			</div>
		</div>
    <ul>
      <!-- 图像列表 -->
      <router-link :to="'/home/photoinfo/'+item.id" v-for="item in list" :key='item.id' tag='li'>
        <img v-lazy="item.img_url">
        <div class='info'>
          <div class='info-title'>{{ item.title }}</div>
          <div class='info-content' v-html='item.content'></div>
        </div>
      </router-link>
    </ul>
  </div>

</template>

<script>
// 导入MUI中的js
import mui from '../../../lib/mui/js/mui.min.js'

export default {
  data(){
    return {
      cates:[],
      list:[]
    }
  },
  mounted(){
    mui('.mui-scroll-wrapper').scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  created(){
    this.getAllCategory();
    this.getImg(0);
  },
  methods: {
    getAllCategory(){
      this.$http.get('getimgcategory').then(result => {
        if(result.body.status === 0){
          this.cates = result.body.message
          this.cates.unshift({id:0,title:'全部'})
        }
      })
    },
    getImg(id){
      this.$http.get('getimages/'+id).then(result => {
        if(result.body.status === 0){
          this.list = result.body.message
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  touch-action: pan-y;
  margin:0;
  padding:0;
}
ul{
  list-style: none;
  margin: 0;
  padding: 10px;
  padding-bottom: 0;
  li{
    margin-bottom:10px;
    background: #ccc;
    text-align: center;
    box-shadow: 0 0 6px;
    position: relative;
    img{
      width:100%;
    }
    img[lazy=loading] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
    .info{
      position: absolute;
      bottom: 0;
      color: white;
      max-height: 84px;
      overflow: hidden;
      text-align:left;
      background: rgba(0,0,0,0.4);
      .info-title{
        font-size:16px;
      }
      .info-content{
        font-size: 14px;
        
        color:white;
      }
    }

  }
}

</style>
